<template>
  <div style="width: 100%;padding: 10px">
    <el-card class="box-card">
      <div>
        <div  style="display: flex;align-items: center;justify-content: space-between">
          <div class="details_Header">
            <div class="deleted_Line"></div>
            <span class="details_HeaderTitle">单据信息</span>
          </div>
          <div style="display: flex">
            <el-button type="primary" :loading='confirm'  @click="confirmreceipt"  v-if="(details.status==0&&details.paymentPluginId=='cashPayPlugin')">确认收款</el-button>
            <el-button type="primary" :loading="contrastClicked" @click="paymentQuery" v-if="(details.status==0&&paymentPlug==true)||(details.status==3&&paymentPlug==true)">对账</el-button>
            <el-button type="primary"  v-permission="['payment.audit']" @click="refundClick"  v-if="details.status==1">退款</el-button>
          </div>
        </div>
        <div class="deleted_OrderHeader">
          <el-row :gutter="24">
            <el-col :span="8">
              <span class="deleted_Row_Headings">收款单号：</span>
              <span class="deleted_OrderTitle">{{details.sn}}</span>
            </el-col>
            <el-col :span="8">
              <span class="deleted_Row_Headings">订单号：</span>
              <span class="deleted_OrderTitle">{{details.orderSn}}</span>
            </el-col>


          </el-row>
        </div>
        <div>
          <el-row :gutter="24" class="deleted_OrderContent">
            <el-col :span="8">
              <span class="deleted_Row_Headings">创建日期：</span>
              <span class="deleted_OrderTitle">{{details.createDate | dateFormatter}}</span>
            </el-col>
          </el-row>
          <el-row :gutter="24" class="deleted_OrderContent">
            <el-col :span="8">
              <span class="deleted_Row_Headings">订单摘要：</span>
              <span class="deleted_OrderTitle">{{details.memo}}</span>
            </el-col>
            <el-col :span="8">
              <span class="deleted_Row_Headings">支付类型：</span>
              <span class="deleted_OrderTitle">{{details.type|watchType}}</span>
            </el-col>
          </el-row>
          <el-row :gutter="24" class="deleted_OrderContent">
            <el-col :span="8" style="overflow: hidden">
              <span class="deleted_Row_Headings">付款人名字：</span>
              <span class="deleted_OrderTitle deleted_OrderTitle_span">{{details.name}}</span>
            </el-col>
            <el-col :span="8">
              <span class="deleted_Row_Headings">付款人电话：</span>
              <span class="deleted_OrderTitle deleted_OrderTitle_span" >{{details.mobile}}</span>
            </el-col>
          </el-row>
        </div>
        <div class="details_PayHeader">
          <div class="deleted_Line"></div>
          <span class="details_HeaderTitle">付款信息</span>
        </div>
        <div>
          <el-row :gutter="24" class="deleted_OrderContent">
            <el-col :span="8">
              <span class="deleted_Row_Headings">付款时间：</span>
              <span class="deleted_OrderTitle" >{{details.paymentDate|datetimeFormatter}}</span>
            </el-col>
          </el-row>
          <el-row :gutter="24" class="deleted_OrderContent">
            <el-col :span="8">
              <span class="deleted_Row_Headings">付款状态：</span>
              <span class="deleted_OrderTitle" style="color: rgb(64, 158, 255)">{{details.status|watchStatus}}</span>
            </el-col>
          </el-row>

          <el-row :gutter="24" class="deleted_OrderContent">
            <el-col :span="8">
              <span class="deleted_Row_Headings">付款方式：</span>
              <span class="deleted_OrderTitle">{{details.paymentPluginName}}</span>
            </el-col>
          </el-row>
          <el-row :gutter="24" class="deleted_OrderContent">
            <el-col :span="8">
              <span class="deleted_Row_Headings">付款凭证：</span>
              <span class="deleted_OrderTitle">{{details.tranSn}}</span>
            </el-col>
          </el-row>
          <el-row :gutter="24" class="deleted_OrderContent">
            <el-col :span="8">
              <span class="deleted_Row_Headings">付款金额：</span>
              <span class="deleted_OrderTitle">{{details.amount}}</span>
            </el-col>
          </el-row>
          <el-row :gutter="24" class="deleted_OrderContent">
            <el-col :span="8">
              <span class="deleted_Row_Headings">退款金额：</span>
              <span class="deleted_OrderTitle">{{details.refund}}</span>
            </el-col>
          </el-row>
        </div>

      </div>
    </el-card>

  </div>
</template>

<script>
  import {EventBus} from "@/api/eventBus";
  import permission from '@/directive/permission/index.js' // 权限判断指令
  import elDragDialog from '@/directive/el-drag-dialog' // base on element-ui
  import { find,query ,refund,confirm} from '../../api/payment'

  export default {
    directives: {elDragDialog,permission},
    name: 'payment-details',
    data(){
      return{
        details:'',
        detailList:[],
        contrastClicked: false,
        paymentPluginId:'',
        paymentPlug:"",
        confirm:false
      }
    },
    methods:{
      confirmreceipt(){
        this.confirm=true
        this.$confirm('确认收款?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          confirm(this.$route.query.id).then(res=>{
            if (res.type='success'){
              this.$message('收款成功');
              this.findPayment()
            }
          })
           this.confirm=false
        }).catch(()=>{
          this.confirm=false
        })

      },

      refundClick(){
        let params=new URLSearchParams()
        params.append('id', this.$route.query.id);
        this.$confirm('确认退款?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          refund(params).then(res=>{
            if (res.type='success'){
              EventBus.$emit('payment-details', res.data)
              this.$message('退款成功');
              this.findPayment()
            }
          })
        })

      },

      paymentQuery(){
        this.contrastClicked = true
        let params = new URLSearchParams();
        params.append('id', this.$route.query.id);
          query(params).then(response=>{
                if (response.type='success'){
                    this.$message('校验成功');
                    this.findPayment()
                }
                this.contrastClicked = false
          }).catch(() => {
            this.contrastClicked = false
          })
      },
      findPayment(){
          find(this.$route.query.id).then(response=>{
            this.details = response.data.payment;
            this.detailList=response.data.itemList
            this.paymentPluginId=response.data.itemList[0].paymentPluginId
            console.log(this.paymentPluginId.indexOf('weixin'));
            if(this.paymentPluginId.indexOf('weixin')!=-1||this.paymentPluginId.indexOf('alipay')!=-1||this.paymentPluginId.indexOf('union')!=-1)
           {
              this.paymentPlug=true
             }

          })
      }
    },
    filters:{
      watchMethod(val){
        if (val==0){
          return '线上支付'
        }else if (val==1){
          return '线下支付'
        }
      },
      watchType(val){
        if (val===0){
          return '付款'
        }else if (val===1){
          return '充值'
        }else if (val===2){
          return '收款'
        }
      },
      watchStatus(val){
        if (val == 0){
          return '等待支付'
        } else if (val == 1){
          return '支付成功'
        } else if (val == 2){
          return '超时关闭'
        } else if (val == 3){
          return '支付失败'
        }
      },
    },
    created() {
      this.findPayment()
    }
  }
</script>

<style scoped>
  .box-card {
    width: 100%;
    box-sizing: border-box;
  }
  /deep/ .el-dialog__header {
    border: 1px solid #eeeeee !important;
    padding: 15px !important;
  }
  .popup_content {
    padding-bottom: 0px !important;
  }
  .details_Header {
    display: flex;
    align-items: center;
  }

  .deleted_Line {
    width: 2px;
    height: 12px;
    background-color: #409EFF;
  }

  .details_HeaderTitle {
    font-size: 16px;
    font-weight: 600;
    margin-left: 5px;
    display: block;
    width: 150px;
  }

  .deleted_OrderHeader {
    padding-top: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #f2f2f2;
  }
  deleted_OrderTitle_span{
    overflow: hidden;
    text-overflow: ellipsis;
    width: 200px;
  }
  .deleted_OrderTitle {
    font-size: 14px;
  }
  .updateButton{
    border-radius: 5px;
    height: 35.6px;
    width: 98px;
  }
  .deleted_OrderContent {
    margin-top: 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .details_PayHeader {
    display: flex;
    align-items: center;
    margin-top: 40px;
  }

  .details_Buyers {
    display: flex;
    align-items: center;
  }

  .deleted_logo {
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }

  .table_Header {
    width: 100%;
    background-color: #f5f7fa;
    padding: 10px;
  }
  .table_HeaderTitle {
    font-size: 12px;
    color: #353535;
    font-weight: 600;
  }
  .align_items {
    display: flex;
    align-items: center;
  }
  .justify_left {
    display: flex;
    align-items: center;
  }
  .justify_right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  .table_ContentTitle {
    font-size: 12px;
    color: #353535;
  }
  .shop_Height {
    min-height: 30px;
  }
  .deleted_Row_Headings{
    font-size: 14px;
    color: #666666;
    width: 85px;
  }
  .deleted_OrderName {
    font-size: 14px;
    color: #409EFF;
    margin-left: 5px;
    width: 250px;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
</style>
